sanitize.css

What is sanitize.css?

The sanitize.css package is a CSS library that provides consistent, cross-browser default styling for HTML elements. It's designed to normalize styles across different browsers, remove default margins, and apply a consistent box-sizing model. This helps in creating a more predictable styling baseline for web projects.

What are sanitize.css's main functionalities?

Normalize styles

This code ensures that every element on the page, including pseudo-elements, inherits the box-sizing property from the html element, which is set to border-box. This makes it easier to manage layouts as it includes padding and border in the element's total width and height.

html { box-sizing: border-box; } *, *::before, *::after { box-sizing: inherit; }

Remove default margins

This code removes the default margins from common elements like body, headings, paragraphs, and others. It provides a clean slate for adding custom spacing without having to override browser defaults.

body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }

Set default font-family

This sets the default font family to sans-serif for the entire HTML document, ensuring a consistent typography baseline across different browsers.

html { font-family: sans-serif; }

Other packages similar to sanitize.css

normalize.css

normalize.css is a popular CSS reset library that aims to normalize styles across browsers. It focuses on fixing common inconsistencies and preserving useful defaults rather than unifying all styles like sanitize.css. While both aim to provide a consistent styling baseline, normalize.css is more about correcting quirks without imposing a specific styling philosophy.

reset-css

reset-css is another CSS reset library that aims to strip away all default browser styling on elements. Unlike sanitize.css, which applies minimalistic default styles and normalizes differences, reset-css provides a clean slate by removing all styles, allowing developers to start styling from scratch.

README

sanitize.css

sanitize.css is a CSS library that corrects broken and missing styles in all browsers, preserving useful defaults rather than unstyling everything. It’s developed alongside normalize.css, so every normalization includes the browsers or browser versions being targeted, and every opinionated change is marked and documented.

NPM

npm install --save sanitize.css

Bower

bower install --save sanitize-css

Features

Box sizing should be inherited and default to border-box

* {
	box-sizing: inherit;
}

html {
	box-sizing: border-box;
}

Backgrounds should not repeat by default

* {
	background-repeat: no-repeat;
}

Cursor should only change to hint non-obvious interfaces

html {
	cursor: default;
}

Documents should not use a margin for outer padding

body {
	margin: 0;
}

Navigation lists should not include a marker style

nav ol, nav ul {
	list-style: none;
}

Text selections should not include text shadows

::selection {
	text-shadow: none;
}

Media elements should align to the text center of other content

audio, canvas, iframe, img, svg, video {
	vertical-align: middle;
}

SVGs should fallback to their surrounding text color

svg {
	fill: currentColor;
}

Tables should not include additional border spacing

table {
	border-collapse: collapse;
}

Form controls should be easily style-able

button, input, select, textarea {
	background-color: transparent;
	color: inherit;
	font-size: inherit;
	line-height: inherit;
}

Textarea should only resize vertically by default

textarea {
	resize: vertical;
}

Single taps should be dispatched immediately on clickable elements

a, area, button, input, label, select, summary, textarea, [tabindex] {
	-ms-touch-action: manipulation;
	touch-action: manipulation;
}

ARIA roles should include visual cursor hints

[aria-busy="true"] {
	cursor: progress;
}

[aria-controls] {
	cursor: pointer;
}

[aria-disabled] {
	cursor: default;
}

Visually hidden content should remain accessible

[aria-hidden="false"][hidden]:not(:focus) {
	clip: rect(0, 0, 0, 0);
	display: inherit;
	position: absolute;
}

Differences

normalize.css and sanitize.css correct browser bugs while carefully testing and documenting changes. normalize.css styles adhere to css specifications. sanitize.css styles adhere to common developer expectations and preferences. reset.css unstyles all elements. Both sanitize.css and normalize.css are maintained in sync.

Support

At present, sanitize.css supports the current and previous major releases of popular web browsers. When a new version is released, we begin supporting that newer version and stop supporting the third version back. Additionally, many older browsers remain supported without supplementary CSS.

Currently tested and supported browsers in the latest release include Android 4.3-4.4+, Chrome 50-51+, Edge 12-13+, Firefox 46-47+, Internet Explorer 10-11, iOS 7-8+, Opera 37-38+, Safari 8-9+, and Windows Phone 8.1+.

Additionally tested and supported browsers (requiring little supplementary CSS) include Internet Explorer 9 and Safari 7.

License

sanitize.css is dedicated to the public domain.